<%@ page import="wty.Bee.UserDao" %>
<%@ page import="wty.Bee.User" %>
<%@ page import="java.util.Base64" %>
<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2025/5/27
  Time: 15:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>书影音世界 - 发现好内容</title>
  <style>
    /* 全局样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }

    body {
      background-color: #f7f7f7;
      color: #333;
      line-height: 1.6;
    }

    a {
      text-decoration: none;
      color: #007722;
    }

    a:hover {
      color: #009944;
    }

    /* 顶部导航栏 */
    .header {
      background-color: #ffffff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .nav-container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }

    .logo {
      font-size: 24px;
      font-weight: bold;
      color: #007722;
      flex-shrink: 0;
    }

    .nav-links {
      display: flex;
      gap: 20px;
      flex-shrink: 0;
    }

    .nav-links a {
      padding: 8px 12px;
      border-radius: 4px;
    }

    .nav-links a:hover {
      background-color: #f0f0f0;
    }

    .search-box {
      display: flex;
      align-items: center;
      flex-grow: 1;
      max-width: 350px;
      margin: 0 15px;
    }

    .search-box input {
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 4px 0 0 4px;
      width: 100%;
      min-width: 150px;
    }

    .search-box button {
      padding: 8px 12px;
      background-color: #007722;
      color: white;
      border: none;
      border-radius: 0 4px 4px 0;
      cursor: pointer;
      white-space: nowrap;
    }

    /* 主要内容区 */
    .main-container {
      max-width: 1100px;
      margin: 20px auto;
      display: grid;
      grid-template-columns: 3fr 1fr;
      gap: 20px;
    }

    /* 左侧内容 */
    .content-left {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      padding: 20px;
    }

    .section-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
      color: #007722;
    }

    /* 电影卡片 */
    .movie-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .movie-card {
      cursor: pointer;
      transition: transform 0.3s;
    }

    .movie-card:hover {
      transform: translateY(-5px);
    }

    .movie-poster {
      width: 100%;
      height: 180px;
      object-fit: cover;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .movie-title {
      margin-top: 8px;
      font-size: 14px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .movie-rating {
      color: #e09015;
      font-size: 12px;
      text-align: center;
    }

    /* 右侧边栏 */
    .sidebar {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      padding: 20px;
    }

    .user-card {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }

    .user-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 10px;
    }

    .user-name {
      font-weight: bold;
    }

    .user-action {
      font-size: 12px;
      color: #666;
    }

    .side-list {
      list-style: none;
    }

    .side-list li {
      padding: 8px 0;
      border-bottom: 1px solid #eee;
    }

    /* 底部 */
    .footer {
      background-color: #f0f0f0;
      padding: 20px;
      text-align: center;
      font-size: 12px;
      color: #666;
      margin-top: 30px;
    }

    /* 用户信息区域 - 已重构 */
    .user-info-container {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      min-width: 150px;
      max-width: 300px;
      background: #f8f8f8;
      border-radius: 30px;
      padding: 5px 15px 5px 5px;
      transition: all 0.3s ease;
    }

    .user-info-container:hover {
      background: #f0f0f0;
    }

    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;
      flex-shrink: 0;
      object-fit: cover;
      border: 2px solid #007722;
    }

    .user-details {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .user-greeting {
      font-size: 12px;
      color: #666;
      white-space: nowrap;
    }

    .user-name {
      font-size: 14px;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 200px;
      color: #007722;
    }

    /* 响应式设计 */
    @media (max-width: 992px) {
      .nav-container {
        gap: 10px;
      }

      .user-info-container {
        max-width: 200px;
      }
    }

    @media (max-width: 768px) {
      .main-container {
        grid-template-columns: 1fr;
        padding: 0 15px;
      }

      .movie-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .nav-links {
        display: none;
      }

      .nav-container {
        flex-direction: column;
        align-items: stretch;
      }

      .logo {
        align-self: center;
        margin-bottom: 10px;
      }

      .search-box {
        max-width: 100%;
        margin: 10px 0;
      }

      .user-info-container {
        align-self: center;
        margin-top: 10px;
      }
    }

    @media (max-width: 480px) {
      .user-info-container {
        max-width: 180px;
        padding: 5px 10px 5px 5px;
      }

      .user-name {
        font-size: 13px;
        max-width: 120px;
      }
    }
  </style>
</head>
<body>
<!-- 顶部导航栏 -->
<header class="header">
  <div class="nav-container">
    <div class="logo">书影世界</div>
    <div class="nav-links">
      <a href="http://localhost:8081/#/center">首页</a>
      <a href="search?keyword=教父&type=movie">电影</a>
      <a href="search?keyword=百年&type=book">图书</a>
      <a href="#">小组</a>
      <a href="#">同城</a>
    </div>
    <div class="search-box">
      <form action="search" method="get">
        <input type="text" name="keyword" placeholder="搜索电影、图书...">
        <select name="type" style="margin:0 5px;padding:7px">
          <option value="all">全部</option>
          <option value="movie">电影</option>
          <option value="book">图书</option>
        </select>
        <button type="submit">搜索</button>
      </form>
    </div>

    <%
      HttpSession userSession = request.getSession();

//      // 模拟登陆成功
//      userSession.setAttribute("userId","9e6dda34-4da1-4287-9682-0a2696085b21");

      Object userIdObj = userSession.getAttribute("userId");
      String userId = userIdObj != null ? userIdObj.toString() : "";

      UserDao dao = new UserDao();
      User user = dao.selectById(userId);
    %>

    <div class="user-info-container">
      <img id="userAvatar" src="" alt="用户头像" class="user-avatar">
      <div class="user-details">
        <div class="user-greeting" style="color: red">欢迎你！！！</div>
        <div class="user-name"><%= user != null ? user.getUsername() : "未登录用户" %></div>
      </div>
    </div>

    <script>
      // 使用js读取字节数组的用户头像
      document.addEventListener('DOMContentLoaded', function() {
        const avatarImg = document.getElementById('userAvatar');
        <%--const user = <%= user != null ? "{'avatar': '" + Base64.getEncoder().encodeToString(user.getAvatar()) + "'}" : "null" %>;--%>
        const user = <%= user != null && user.getAvatar() != null ?
        "{'avatar': '" + Base64.getEncoder().encodeToString(user.getAvatar()) + "'}" :
        "null" %>;
        if (user && user.avatar) {
          avatarImg.src = 'data:image/png;base64,' + user.avatar;
        } else {
          avatarImg.src = "https://img.shetu66.com/2023/04/25/1682410853619598.png";
        }
      });

      //点击返回个人中心
      document.querySelector('.user-info-container').addEventListener('click',()=>{
        const userChoice = confirm("你确定要返回个人中心吗？");

        if (userChoice) {
          console.log("用户选择了：是");
          location.href = 'http://localhost:8081/#/center';
        } else {
          console.log("用户选择了：否");
          return
        }
      })
    </script>

  </div>
</header>

<!-- 主要内容区 -->
<div class="main-container">
  <!-- 左侧内容 -->
  <div class="content-left">
    <h2 class="section-title">热门电影</h2>
    <div class="movie-grid">

      <div class="movie-card">
        <a href="movieDetail?id=1">
          <img src="https://ts1.tc.mm.bing.net/th/id/R-C.628dee16ebf2bbcdbf844a450496a4e9?rik=9qtGwVv7pnDgkw&riu=http%3a%2f%2fimg.doooor.com%2fimg%2fforum%2f201706%2f23%2f022948ng4jikg4igq2k4kg.jpg&ehk=6xYkyKaw6UMCmZ5Azvl1a9uMPjS1hJt1f2qIDT8BXkM%3d&risl=&pid=ImgRaw&r=0" alt="电影海报" class="movie-poster">
          <div class="movie-title">肖申克的救赎</div>
          <div class="movie-rating">★★★★☆ 4.0</div>
        </a>
      </div>
      <div class="movie-card">
        <a href="movieDetail?id=2">
          <img src="https://ts1.tc.mm.bing.net/th/id/R-C.8b835eb05fcefefb85a4cf2ce09dec4d?rik=7Y0eAWqSYcM3EQ&riu=http%3a%2f%2fpuui.qpic.cn%2fvcover_vt_pic%2f0%2fx90v161tdg3lrzl1567482990%2f0&ehk=JINDpaNEHHL6Wro7no%2b%2fCrvRvt7gVmOOyUOPe5%2bnqMg%3d&risl=&pid=ImgRaw&r=0" alt="电影海报" class="movie-poster">
          <div class="movie-title">教父</div>
          <div class="movie-rating">★★☆☆☆ 2.2</div>
        </a>
      </div>
      <div class="movie-card">
        <a href="movieDetail?id=3">
          <img src="https://www.bizhi3.com/uploads/ueditor/image/20220124/1642966753121972.jpg" alt="电影海报" class="movie-poster">
          <div class="movie-title">黑暗骑士</div>
          <div class="movie-rating">★★★★☆ 4.0</div>
        </a>
      </div>
      <div class="movie-card">
        <a href="movieDetail?id=4">
          <img src="https://ts1.tc.mm.bing.net/th/id/R-C.bbc380112ca38ab57caf4b798cd8810b?rik=YHutETyWufP2uA&riu=http%3a%2f%2fpuui.qpic.cn%2fvcover_vt_pic%2f0%2fr6hc2kqgvnmiejn1567396046%2f0&ehk=%2bkNZ0pXo%2fkRDGZXeNPhf0tHOWvOAI9u1jbMudSramGg%3d&risl=&pid=ImgRaw&r=0" alt="电影海报" class="movie-poster">
          <div class="movie-title">阿甘正传</div>
          <div class="movie-rating">★★★☆☆ 3.2</div>
        </a>
      </div>

<%--      <div class="movie-card">--%>
<%--        <img src="https://img.shetu66.com/2023/04/25/1682410853619598.png" alt="电影海报" class="movie-poster">--%>
<%--        <div class="movie-title">满江红</div>--%>
<%--        <div class="movie-rating">★★★☆☆ 7.0</div>--%>
<%--      </div>--%>
<%--      <div class="movie-card">--%>
<%--        <img src="https://img.shetu66.com/2023/04/25/1682410853619598.png" alt="电影海报" class="movie-poster">--%>
<%--        <div class="movie-title">八角笼中</div>--%>
<%--        <div class="movie-rating">★★★★☆ 7.5</div>--%>
<%--      </div>--%>
<%--      <div class="movie-card">--%>
<%--        <img src="https://img.shetu66.com/2023/04/25/1682410853619598.png" alt="电影海报" class="movie-poster">--%>
<%--        <div class="movie-title">长安三万里</div>--%>
<%--        <div class="movie-rating">★★★★☆ 8.3</div>--%>
<%--      </div>--%>
<%--      <div class="movie-card">--%>
<%--        <img src="https://img.shetu66.com/2023/04/25/1682410853619598.png" alt="电影海报" class="movie-poster">--%>
<%--        <div class="movie-title">孤注一掷</div>--%>
<%--        <div class="movie-rating">★★★★☆ 6.9</div>--%>
<%--      </div>--%>

    </div>

    <h2 class="section-title" style="margin-top: 30px;">新书速递</h2>
    <div class="movie-grid">
      <div class="movie-card">
        <a href="bookDetail?id=1">
          <img src="https://so1.360tres.com/t017c401645dd63e333.png" alt="书影海报" class="movie-poster">
          <div class="movie-title">百年孤独</div>
          <div class="movie-rating">★★★★☆ 4.0</div>
        </a>
      </div>
      <div class="movie-card">
        <a href="bookDetail?id=2">
          <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.TG0WnPVm6Za-orDxGrmjyQHaHa?rs=1&pid=ImgDetMain&cb=idpwebp2&o=7&rm=3" alt="书影海报" class="movie-poster">
          <div class="movie-title">活着</div>
          <div class="movie-rating">★★★★★ 5.0</div>
        </a>
      </div>
      <div class="movie-card">
        <a href="bookDetail?id=3">
          <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.W9U8p08TgfRsfHr3YoOkcAHaEo?w=262&h=180&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3" alt="书影海报" class="movie-poster">
          <div class="movie-title">小王子</div>
          <div class="movie-rating">★★★☆☆ 3.0</div>
        </a>
      </div>
      <div class="movie-card">
        <a href="bookDetail?id=4">
          <img src="https://p1.ssl.qhimg.com/t0147ec1b07078c0cf8.jpg" alt="书影海报" class="movie-poster">
          <div class="movie-title">三体</div>
          <div class="movie-rating">★★★★☆ 4.0</div>
        </a>
      </div>
    </div>
  </div>

  <!-- 右侧边栏 -->
  <div class="sidebar">
    <div class="user-card">
      <img src="https://img.shetu66.com/2023/04/25/1682410853619598.png" alt="电影海报" class="movie-poster">
      <div>
        <div class="user-name">欢</div>
        <div class="user-name">迎</div>
      </div>
    </div>

    <h3 class="section-title">本周热门</h3>
    <ul class="side-list">
      <li><a href="#">《奥本海默》观影讨论</a></li>
      <li><a href="#">2023年度读书榜单</a></li>
      <li><a href="#">独立音乐人推荐</a></li>
      <li><a href="#">城市放映会报名</a></li>
      <li><a href="#">科幻小说创作大赛</a></li>
    </ul>

    <h3 class="section-title" style="margin-top: 20px;">发现小组</h3>
    <ul class="side-list">
      <li><a href="#">电影爱好者</a></li>
      <li><a href="#">读书会</a></li>
      <li><a href="#">黑胶唱片</a></li>
      <li><a href="#">文艺青年</a></li>
      <li><a href="#">摄影交流</a></li>
    </ul>
  </div>
</div>

<!-- 页脚 -->
<footer class="footer">
  <p>© 2023 书影音世界 - 发现好内容</p>
  <p>关于我们 · 帮助中心 · 联系我们 · 隐私政策</p>
</footer>

<script>
  // document.querySelectorAll('.movie-card').forEach(card => {
  //   card.addEventListener('click', function() {
  //     alert('即将跳转到详情页: ' + this.querySelector('.movie-title').innerText);
  //   });
  // });
</script>
</body>
</html>